mixin error-area
  .error-area
    - var error = view.state.get('error');
    if error
      .row
        .col-xs-7.col-xs-offset-3
      .alert.alert-danger= error

mixin use-social-signon
  if view.utils.isCodeCombat
    if !view.showLibraryIdInsteadOfUsername
      .hr-text
        hr
        span(data-i18n="general.or")

      .auth-network-logins.text-center
        .gplus-login#google-login-button
          a.network-login(disabled=!view.signupState.get('gplusEnabled'), data-sso-used="gplus")
            img.gplus-logo(src="/images/pages/modal/auth/gplus_sso_button2.svg", draggable="false")
        if !/(teacher|student)/.test(view.signupState.get('path'))
          .facebook-login
            a#facebook-signup-btn.network-login(disabled=!view.signupState.get('facebookEnabled'), data-sso-used="facebook")
              img.facebook-logo(src="/images/pages/modal/auth/facebook_sso_button2.png", draggable="false")
        if /(teacher|student)/.test(view.signupState.get('path'))
          .clever-login
            a#clever-signup-btn.network-login(data-sso-used="clever")
              img.clever-logo(src="/images/pages/modal/auth/clever-logo-blue.png", draggable="false")
        if /(teacher|student)/.test(view.signupState.get('path'))
          .schoology-login
            a#schoology-signup-btn.network-login(data-sso-used="schoology")
              img.schoology-login-img(src="/images/pages/modal/auth/schoology.png")
              span Schoology
          .classlink-login
            a#classlink-signup-btn.network-login(data-sso-used="classlink")
              img.classlink-login-img(src="/images/pages/modal/auth/classlink-logo-small.png")
              span ClassLink


    // TODO: turn on once we can ask about school inside ConfirmationView
    //- if view.signupState.get('path') === 'individual' && (!me.get('country') || me.get('country') == 'united-states')
    //-   .checkbox#want-in-school
    //-     label.control-label(for="want-in-school-checkbox")
    //-       input#want-in-school-checkbox(type="checkbox" value="")
    //-       span(data-i18n="signup.want_codecombat_in_school")
  else
    .auth-network-logins
      .gplus-login
        a#google-login-button.network-login(disabled=!view.signupState.get('gplusEnabled'), data-sso-used="gplus")
          - var buttonURL = "/images/ozaria/common/log-in-google-sso-generic.svg"
          - if(view.signupState.get('path') == 'teacher')
          -   imgURL = "/images/ozaria/common/log-in-google-sso.svg"
          img.gplus-logo(src=buttonURL, draggable="false")
      .classlink-login
        a#classlink-signup-btn.network-login(data-sso-used="classlink")
          img.classlink-login-img(src="/images/pages/modal/auth/classlink-logo-small.png")
          span ClassLink
      //- TODO: Enable once we have Ozaria fb login working.
      //- .facebook-login
      //-   a#facebook-signup-btn.network-login(disabled=!view.signupState.get('facebookEnabled'), data-sso-used="facebook")
      //-     img.facebook-logo(src="/images/pages/modal/auth/facebook_sso_button2.png", draggable="false")

    // TODO: turn on once we can ask about school inside ConfirmationView
    //if view.signupState.get('path') === 'individual' && (!me.get('country') || me.get('country') == 'united-states')
      .checkbox#want-in-school
        label.control-label(for="want-in-school-checkbox")
          input#want-in-school-checkbox(type="checkbox" value="")
          span(data-i18n="signup.want_codecombat_in_school")
    .row.or-row
      .line
      p.or(data-i18n="login.or")
      .line

form#basic-info-form.modal-body.basic-info
  - var path = view.signupState.get('path')
  .modal-body-content
    if view.utils.isCodeCombat
      if me.get("preferredLanguage") == "he" || window.location.host == "il.codecombat.com"
        .alert.alert-info.text-center(dir="rtl")
          span תלמיד מערכת החינוך?
          a(href="https://pub.skillz-edu.org/portal/playground")  התחבר דרך פורטל משרד החינוך
    else
      if me.useSocialSignOn()
        +use-social-signon
    div.form-container
      if ['student', 'teacher'].indexOf(view.signupState.get('path')) !== -1
        .row.full-name
          .col-xs-offset-3(class=(path === 'teacher' && !me.showChinaRegistration() ? 'col-xs-3' : 'col-xs-5'))
            .form-group
              label.control-label(for="first-name-input")
                span(data-i18n="general.first_name")
              input#first-name-input.form-control.input-lg(name="firstName" value=view.signupState.get('signupForm').firstName dir="auto" spellcheck="false")
          if !me.showChinaRegistration()
            div(class=(path === 'teacher' ? 'col-xs-3' : 'col-xs-4'))
              if view.signupState.get('path') === 'teacher'
                .last-name.form-group
                  label.control-label(for="last-name-input")
                    span(data-i18n="general.last_name")
                  input#last-name-input.form-control.input-lg(name="lastName" value=view.signupState.get('signupForm').lastName dir="auto" spellcheck="false")
              else
                .last-initial.form-group
                  label.control-label(for="last-name-input")
                    span(data-i18n="general.last_initial")
                  input#last-name-input.form-control.input-lg(name="lastName" maxlength="1" value=view.signupState.get('signupForm').lastName dir="auto" spellcheck="false")
      .form-group
        .row.rtl-allowed
          .col-xs-5.col-xs-offset-3.rtl-allowed
            if view.utils.isOzaria || !view.hideEmail
              label.control-label(for="email-input")
                span(data-i18n="share_progress_modal.form_label")
              if view.signupState.get('path') === 'student'
                .help-block.optional-help-block.pull-right
                  span.optional-text(data-i18n="signup.optional")
              input.form-control.input-lg#email-input(name="email" type="email" value=view.signupState.get('signupForm').email dir="auto")
          .col-xs-4.email-check.fancy-error.rtl-allowed
            - var checkEmailState = view.state.get('checkEmailState');
            if checkEmailState === 'checking'
              span.small(data-i18n="signup.checking")
            if checkEmailState === 'exists'
              span.small
                span.text-burgundy.glyphicon.glyphicon-remove-circle
                =" "
                span(data-i18n="signup.account_exists")
                =" "
                a.login-link(data-i18n="signup.sign_in")

            if checkEmailState === 'available'
              span.small
                span.text-forest.glyphicon.glyphicon-ok-circle
                =" "
                span(data-i18n="signup.email_good")

      if view.signupState.get('path') !== 'teacher'
        if view.showLibraryIdInsteadOfUsername
          .form-group
            .row.library-signup-text
              span(data-i18n="library.library_signup_promotion")
        .form-group
          .row.rtl-allowed
            .col-xs-5.col-xs-offset-3.rtl-allowed
              if view.showLibraryIdInsteadOfUsername
                label.control-label(for="username-input")
                  span(data-i18n="library.library_card")
              else
                label.control-label(for="username-input")
                  span(data-i18n="general.username")
              input.form-control.input-lg#username-input(name="name" value=view.signupState.get('signupForm').name dir="auto" spellcheck="false")
            .col-xs-4.name-check.fancy-error.rtl-allowed
              - var checkNameState = view.state.get('checkNameState');
              if checkNameState === 'checking'
                span.small(data-i18n="signup.checking")
              if checkNameState === 'exists'
                span.small
                  span.text-burgundy.glyphicon.glyphicon-remove-circle
                  =" "
                  span= view.state.get('suggestedNameText')
              if checkNameState === 'available'
                span.small
                  span.text-forest.glyphicon.glyphicon-ok-circle
                  =" "
                  span(data-i18n="signup.name_available")

      .form-group
        .row.rtl-allowed
          .col-xs-5.col-xs-offset-3.rtl-allowed
            label.control-label(for="password-input")
              span(data-i18n="general.password")
            input.form-control.input-lg#password-input(name="password" type="password" value=view.signupState.get('signupForm').password dir="auto")
            small.form-text.text-muted(data-i18n="signup.password_requirements")

      if view.utils.isCodeCombat
        +error-area
    if view.utils.isCodeCombat && me.useSocialSignOn()
      +use-social-signon

  if view.utils.isOzaria
    +error-area
  // In reverse order for tabbing purposes
  .history-nav-buttons
    if view.signupState.get('path') === 'teacher'
      button.next-button.btn.btn-lg(type='submit' class=view.utils.isCodeCombat ? "btn-navy" : "ozaria-primary-button")
        span(data-i18n="common.next")
    else if view.signupState.get('subModalContinue')
      button#create-account-btn.next-button.btn.btn-lg(type='submit' class=view.utils.isCodeCombat ? "btn-navy" : "ozaria-primary-button")
        span(data-i18n="common.continue")
    else
      button#create-account-btn.next-button.btn.btn-lg(type='submit' class=view.utils.isCodeCombat ? "btn-navy" : "ozaria-primary-button")
        if view.utils.isCodeCombat
          span(data-i18n="login.sign_up")
        else
          span(data-i18n="common.next")


    button.back-button.btn.btn-lg(type='button' class=view.utils.isCodeCombat ? "btn-navy-alt" : "ozaria-secondary-button")
      span(data-i18n="common.back")
